<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <title>IdeaNote</title>
    {% block body %}{% endblock %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.splitter.css') }}">
    {% block cssdefine %}{% endblock %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/idea-note.css') }}">

    <script src="{{ url_for('static', filename='js/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/jquery.splitter.js') }}" type="text/javascript"></script>

    <script>
        let splitter2, splitter1;
        $(document).ready(function () {
            eheight = window.innerHeight;
            splitter1 = $('#content').height(eheight).split({
                orientation: 'vertical',
                limit: 10,
                percent: true,
                position: '15%',
                width: 1,
                invisible: false,
                onDrag: function () {
                    if (splitter1.position() < 100) {
                        splitter1.position(0)
                    }
                }
            });

            splitter2 = $('#center-frame').height(eheight).split({
                orientation: 'vertical',
                limit: 0,
                percent: true,
                position: '0%',
                width: 1,
                invisible: false,
                onDrag: function () {
                    if (splitter2.position() < 200) {
                        splitter2.position(0)
                    }
                }
            });

            flashMessage = function (html, autoExit) {
                flash = $(".flash-message");
                if (typeof html === "undefined") {
                    flash.css("visibility","hidden");
                } else {
                    flash.html(html);
                    flash.css("visibility","visible");
                    if (autoExit === true) {
                        setTimeout(function () {
                            flash.css("visibility","hidden");
                        }, 2000);
                    }
                }
            }

        })
    </script>
    {% block jsdefinebefore %}{% endblock %}
</head>
<body>
<div class="flash-message">同步成功</div>

<div class="content" id="content">
    <div class="left-frame">
        <ul id="catalog-tree" class="ztree"></ul>
    </div>
    <div class="center-frame" id="center-frame">
        <div class="editing">
            {% block centerframe %}{% endblock %}
        </div>
        <div class="preview"></div>
    </div>
</div>

<div class="footer"></div>
{% block jsdefineafter %}{% endblock %}
</body>
</html>